<template>
  <div>
    <h3>电影列表</h3>
    <table border="1">
      <thead>
        <tr>
          <th>Movie ID</th>
          <th>Movie Name</th>
          <th>Movie Type</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(m, index) in movies" :key="m.movieId">
          <td>{{ m.movieId }}</td>
          <td>{{ m.movieName }}</td>
          <td>{{ m.movieType }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
//使用pinia  -> Movie.ts去请求后台数据
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import { useMoviesStore } from '@/stores/Movie.ts'

const userMovices = useMoviesStore()

console.log('toRefs', toRefs(userMovices))
console.log('storeToRefs', storeToRefs(userMovices))

const { movies } = storeToRefs(userMovices)
</script>

<style scoped>
</style>